<template>
  <div class="page-task-paper">
    <div class="pageposition">
      <!-- 头部开始 -->
      <div class="head">
        <div class="head-left">
          <span class="head-l-t">考试中</span>
          <span class="head-tips"
            >*请认真完成本次考试，中途退出考试会影响打分！</span
          >
        </div>
        <div class="head-right">
          <Button type="primary" @click="handleSubmit">提交试卷</Button>
          <Button type="error" style="margin-left:20px;" @click="is_show_logout = true">退出考试</Button>
        </div>
      </div>
      <div class="body-content">
        <div class="toppos">
          <div class="top-left" v-if="!is_done_test && seconds != 0">
            <img src="/img/pc/clock.png" alt="" />
            <no-ssr>
              <van-count-down
                :time="seconds"
                @finish="finish"
                format="HH:mm:ss"
                style="font-size: 30px;font-weight: bold;color: #43474d;"
              >
              </van-count-down>
            </no-ssr>
          </div>
          <div class="top-left" v-if="is_done_test">
            <img src="/img/pc/clock.png" alt="" />
            <no-ssr>
              <van-count-down
                time="0"
                format="HH:mm:ss"
                style="font-size: 30px;font-weight: bold;color: #43474d;"
              >
              </van-count-down>
            </no-ssr>
          </div>
        </div>
         <div class="questions">
          <div class="questions-left">
            <div class="question-cart">答题卡</div>
            <div class="question-box">
              <div
                class="question-list"
                v-for="(im, index) in Math.ceil(questionList.length / 4)"
                :key="index"
              >
                <div
                  :class="[
                    'list-item',
                    'active-left',
                    1 + (im - 1) * 4 == questionList.length
                      ? 'active-right'
                      : '',
                    1 + (im - 1) * 4 == num_active + 1 ? 'num_active' : null
                  ]"
                  v-if="1 + (im - 1) * 4 <= questionList.length"
                  @click="handleToItem(1 + (im - 1) * 4 - 1)"
                >
                  {{ 1 + (im - 1) * 4 }}
                </div>
                <div
                  :class="[
                    'list-item',
                    2 + (im - 1) * 4 == questionList.length
                      ? 'active-right'
                      : '',
                    2 + (im - 1) * 4 == num_active + 1 ? 'num_active' : null
                  ]"
                  v-if="2 + (im - 1) * 4 <= questionList.length"
                  @click="handleToItem(2 + (im - 1) * 4 - 1)"
                >
                  {{ 2 + (im - 1) * 4 }}
                </div>
                <div
                  :class="[
                    'list-item',
                    3 + (im - 1) * 4 == questionList.length
                      ? 'active-right'
                      : '',
                    3 + (im - 1) * 4 == num_active + 1 ? 'num_active' : null
                  ]"
                  v-if="3 + (im - 1) * 4 <= questionList.length"
                  @click="handleToItem(3 + (im - 1) * 4 - 1)"
                >
                  {{ 3 + (im - 1) * 4 }}
                </div>
                <div
                  :class="[
                    'list-item',
                    'active-right',
                    4 + (im - 1) * 4 == num_active + 1 ? 'num_active' : null
                  ]"
                  v-if="4 + (im - 1) * 4 <= questionList.length"
                  @click="handleToItem(4 + (im - 1) * 4 - 1)"
                >
                  {{ 4 + (im - 1) * 4 }}
                </div>
              </div>
            </div>
          </div>
          <div class="questions-right ql-editor">
            <div v-html="item.question && item.question.question"></div>
            <template v-if="item.type == 1">
              <div class="answer-box">
                <RadioGroup v-model="item.user_answer">
                  <Radio
                    :label="x + 1"
                    v-for="(i, x) in item.question.answer"
                    :key="'t1' + x"
                  >
                    <template
                      v-if="item.richTextSwitch == 1"
                    >
                      <span v-html="i"></span>
                    </template>
                    <template v-else>{{ i }}</template>
                  </Radio>
                </RadioGroup>
              </div>
            </template>
            <template v-if="item.type == 2">
              <div class="answer-box">
                <CheckboxGroup v-model="item.user_answer">
                  <Checkbox
                    v-for="(i, x) in item.question.answer"
                    :label="x + 1"
                    :key="'t2' + x"
                  >
                    <template
                      v-if="item.richTextSwitch == 1"
                    >
                      <span v-html="i"></span>
                    </template>
                    <template v-else>{{ i }}</template>
                  </Checkbox>
                </CheckboxGroup>
              </div>
            </template>
            <template v-if="item.type == 3">
              <div class="answer-box">
                <template
                  v-if="item.richTextSwitch == 1"
                >
                  <RichText
                    :content="item.user_answer"
                    @handleChange="v => handleAnswerInputChange(v, item)"
                  ></RichText>
                </template>
                <template v-else>
                  <Input
                    v-model="item.user_answer"
                    type="textarea"
                    :rows="12"
                    :placeholder="$t('locale.pc.mytest.testReview.t4')"
                /></template>
              </div>
            </template>
            <template v-if="item.type == 4">
              <div class="answer-box">
                <div
                  class="type4-ctn"
                  v-for="(item1, index1) in item.user_answer"
                >
                  <template
                    v-if="item.richTextSwitch == 1"
                  >
                    <Divider orientation="center" :key="'t4-line-' + index1">{{
                      index1 + 1
                    }}</Divider>
                    <RichText
                      :content="item1"
                      :key="'t4' + index1"
                      @handleChange="
                        v => handleAnswerInputChange(v, item, index1)
                      "
                    ></RichText>
                  </template>
                  <template v-else>
                    <Input
                      :value="item1"
                      @on-change="v => handleAnswerInputChange(v, item, index1)"
                      :placeholder="$t('locale.pc.mytest.testReview.t4')"
                      :key="'t4' + index1"
                    />
                  </template>
                </div>
              </div>
            </template>
            <template v-if="item.type == 5">
                <div class="answer-box">
                    <RadioGroup v-model="item.user_answer">
                        <Radio :label="1">
                            <span>正确</span>
                        </Radio>
                        <Radio :label="2">
                            <span>错误</span>
                        </Radio>
                    </RadioGroup>
                </div>
            </template>
            <div class="question-btn" style="text-align:right;">
              <i-button
                @click="prev"
                v-if="num_active > 0"
                >上一题</i-button
              >
              <i-button
                @click="next"
                v-if="num_active + 1 != questionList.length"
                >下一题</i-button
              >
              
            </div>
          </div>
        </div>
      </div>
     
    </div>
    <div v-if="is_show_logout" class="logout-modal">
      <div class="logout">
        <div class="logout-title-modal">是否确定退出考试？</div>
        <div class="logout-tips">中途退出考试会影响正常分数，请谨慎退出！</div>
        <div class="logout-btn">
          <i-button @click="$router.push('/classroom?action=mytask')">仍要退出</i-button>
          <i-button @click="is_show_logout = false">取消</i-button>
        </div>
      </div>
    </div>
    <div class="paper_msg_box" v-if="paperMsgBox">
      <div class="paper_dialog">
        <p class="paper_name">{{ taskPaper.paperName }}</p>
        <div class="paper_remind">
          <div class="remind_left">注意事项：</div>
          <div class="remind_right">
            {{ taskPaper.remind }}
          </div>
        </div>
        <div class="paper_time">
          <div class="remind_left">考试时间：</div>
          <div class="remind_right">{{ taskPaper.testTime }}分钟</div>
        </div>
        <div class="paper_btn_start">
          <Button type="primary" @click="startTest">点击开始</Button>
        </div>
      </div>
    </div>
    <div v-if="is_show_submit" class="submit-modal">
      <div class="submit">
        <div class="submit-img">
          <img src="/img/pc/test-submit.png" alt="" />
        </div>
        <div class="submit-title-modal">考试已结束，请停止作答！</div>
        <div class="submit-title-modal">试卷提交中！</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { hexCharCodeToStr } from "~/utils/commonfun";
import { getPaperByTaskId,saveUserTask } from "~/api/task";
import RichText from "~/components/pc/RichText.vue";
export default {
  name: "page-task-paper",
  components: {
    RichText
  },
  data() {
    return {
      question_type_arr: [
        { id: 1, name: this.$t("locale.pc.mytest.testReview.t23") },
        { id: 2, name: this.$t("locale.pc.mytest.testReview.t24") },
        { id: 3, name: this.$t("locale.pc.mytest.testReview.t25") },
        { id: 4, name: this.$t("locale.pc.mytest.testReview.t26") },
        { id: 5, name: this.$t("locale.pc.mytest.testReview.t27") }
      ], //题型
      paperMsgBox: true,
      taskPaper: {},
      is_done_test: false,
      seconds: 0,
      questionList:[],
      num_active:0,
      is_show_logout:false,
      is_show_submit:false,
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      web_info(state) {
        return state.web_info;
      },
      major_list(state) {
        return state.major_list;
      },
      token(state) {
        return state.token;
      },
      kl_md(state) {
        return state.kl_md;
      }
    }),
    item() {
      let res = this.questionList.filter((i, x) => x == this.num_active);
      if (res.length > 0) {
        return res[0];
      } else {
          return {}
      }
    },
    //作业id
    taskId() {
      return this.$route.query.taskId;
    }
  },
  destroyed() {
    this.destroyRemotion();
  },
  deactivated() {
    this.destroyRemotion();
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    handleAnswerInputChange(v, item, index) {
        console.log(v, item, index);
        // console.log(this.questionList);
      //填空题  多个富文本
      if (index !== undefined) {
        this.questionList = this.questionList.map(i => {
          if (i.id == item.id) {
            return {
              ...i,
              user_answer: i.user_answer.map((i1, x1) => {
                if (index == x1) {
                  if(typeof v == "object"){
                    return v.target.value;
                  }
                  return v;
                } else {
                  return i1;
                }
              })
            };
          } else {
            return i;
          }
        });
        //简单题  单个富文本
      } else {
        this.questionList = this.questionList.map(i => {
          if (i.id == item.id) {
            return {
              ...i,
              user_answer: v
            };
          } else {
            return i;
          }
        });
      }
    },
    next() {
      if (this.num_active >= this.questionList.length) {
        this.num_active = 0;
      } else {
        this.num_active++;
      }
    },
    prev() {
      if (this.num_active < this.questionList.length) {
        this.num_active = 0;
      } else {
        this.num_active--;
      }
    },
    handleToItem(n) {
      this.num_active = n;
    },
    startTest() {
      this.paperMsgBox = false;
      this.seconds = Number(this.taskPaper.testTime) * 60 * 1000;
    },
    async getTaskPaper() {
      this.SET_IS_LOADING(true);
      let result = await getPaperByTaskId(this.taskId);
      if (result && result.data && result.data.code == 200) {
        const { questionJson } = result.data.data
        this.taskPaper = {
          ...result.data.data,
          questionJson: JSON.parse(questionJson)
        };
        this.questionList = [];
        JSON.parse(questionJson).forEach(item=>{
            this.questionList = [...this.questionList,...item.questionIds]
        });
        this.questionList = this.questionList.map(item=>{
            return {
                ...item,
                user_answer:item.type != 4 ? undefined : item.question.answer
            }
        })
      } else {
        this.$Message.error(this.$t("locale.pc.classroom.t43"));
      }
      this.SET_IS_LOADING(false);
    },
    finish() {
        this.is_show_submit = true;
        this.handleSubmit('finish');
    },
    async saveUserTask(){
        this.SET_IS_LOADING(true);
        let answerArr = this.questionList.map(item=>{
            return {
                id:item.id,
                user_answer:item.user_answer ? item.user_answer : null,
                score:0,
            }
        })
        let params = {
          paperAnswer:JSON.stringify(answerArr),
          userId:this.user_info.id,
          taskId:this.taskId
        }

        console.log(params);
        let fd = new FormData();
        Object.keys(params).forEach(i => {
            if(params[i] || params[i] === 0){
                fd.append(i, params[i]);
            }
        });
        let result = await saveUserTask(fd);
        if (result && result.data && result.data.code == 200) {
            this.$Message.success("试卷提交成功！");
            this.$router.push('/classroom?action=mytask');
        }else if(result && result.data && result.data.code == 1001){
          this.$Message.warning(result.data.msg);
        }else {
          this.$Message.error("试卷提交失败！");
        }
        this.SET_IS_LOADING(false);
    },
    handleSubmit(type) {
        if(type == 'finish'){
            setTimeout(()=>{
                this.saveUserTask();
            },2000)
        }else{
            this.$Modal.confirm({
                title: this.$t("locale.pc.mytest.testReview.t34"),
                content: this.$t("locale.pc.mytest.testReview.t35"),
                okText: "确认",
                cancelText: "取消",
                onOk: async () => {
                    this.saveUserTask();
                }
            });
        }
      
    },
    //阻止F5刷新
    keydown(e) {
      var evt = window.event || e;
      var code = evt.keyCode || evt.which;
      console.log("code:", code);
      //组合事件
      if (
        code == 116 ||
        (evt.ctrlKey == true && code == 82) ||
        (evt.ctrlKey == true && code == 116) ||
        code == 114
      ) {
        if (evt.preventDefault) {
          evt.preventDefault();
        } else {
          evt.keyCode = 0;
          evt.returnValue = false;
          evt.cancelBubble = true;
          return false;
        }
      }

      //屏蔽Alt+F4
      if (evt.altKey && code == 115) {
        window.showModelessDialog(
          "about:blank",
          "",
          "dialogWidth:1px;dialogheight:1px"
        );
        evt.keyCode = 0;
        evt.returnValue = false;
        evt.cancelBubble = true;
        return false;
      }

      //屏蔽 Alt+ 方向键 ← ;屏蔽 Alt+ 方向键 → ！验证
      if (evt.altKey && (code == 37 || code == 39)) {
        console.log("网页路由");
        evt.keyCode = 0;
        evt.returnValue = false;
        evt.cancelBubble = true;
        return false;
      }
    },
    reflesh(e) {
      var evt = window.event || e;
      let message = undefined;
      evt.returnValue = message;
      return message;
    },
    context(e) {
      return false;
    },
    removeReflesh() {
      console.log("清除刷新事件！");
      document.addEventListener("keydown", this.keydown, false);
      document.addEventListener("contextmenu", this.context, false);
      window.addEventListener("beforeunload", this.reflesh, false);
    },
    destroyRemotion() {
      console.log("恢复事件！");
      document.removeEventListener("keydown", this.keydown);
      document.removeEventListener("contextmenu", this.context);
      window.removeEventListener("beforeunload", this.reflesh);
    },
    initPage() {
      if (process.client) {
        if (!this.token && Object.keys(this.user_info).length == 0) {
          this.$router.replace("/login");
        }
      }
      this.getTaskPaper();
    }
  },
  created() {
    this.initPage();
  }
};
</script>

<style lang="scss" scope>
.page-task-paper {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  .paper_msg_box {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1373;
    background-color: rgba(55, 55, 55, 0.6);
    .paper_dialog {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 600px;
      height: 400px;
      background: #ffffff;
      .paper_name {
        font-size: 20px;
        margin: 10px 0;
        text-align: center;
      }
      .paper_remind {
        display: flex;
        width: 100%;
        height: 230px;
        box-sizing: border-box;
        padding: 10px 20px;
        margin-bottom: 10px;
        .remind_left {
          width: 16%;
          font-size: 16px;
        }
        .remind_right {
          width: 84%;
          font-size: 16px;
          height: 230px;
          overflow: auto;
        }
      }
      .paper_time {
        display: flex;
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        padding: 10px 20px;
        .remind_left {
          width: 16%;
          font-size: 16px;
        }
        .remind_right {
          width: 84%;
          font-size: 16px;
        }
      }
      .paper_btn_start {
        text-align: center;
      }
    }
  }
  .test-result-box {
    margin: auto;
    text-align: center;
    .rs-tt {
      color: #010101;
      font-size: 14px;
      font-family: SourceHanSansSC-regular;
      .tt-st {
        font-weight: bolder;
      }
    }
    .rs-tt {
      vertical-align: text-bottom;
      .rs-sc {
        color: var(--theme-color);
        font-size: 36px;
        text-align: center;
        font-family: SourceHanSansSC-bold;
      }
      .rs-lg {
        color: var(--theme-color);
      }
    }
    .rs-md {
    }
    .rs-tx {
      color: #010101;
      font-size: 14px;
      text-align: center;
      font-family: SourceHanSansSC-regular;
    }
  }
  .logout-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1373;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    .logout {
      width: 444px;
      height: 226px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background: #fff;
      box-shadow: 0px 3px 38px 0px rgba(58, 64, 74, 0.26);
      border-radius: 8px;
      .logout-title-modal {
        text-align: center;
        margin: 50px 0 20px 0;
        font-size: 18px;
        font-weight: bold;
        color: #5d6066;
      }
      .logout-tips {
        text-align: center;
        font-size: 14px;
      }
      .logout-btn {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        .ivu-btn {
          width: 90px;
          height: 34px;
          text-align: center;
          background-color: var(--theme-color);
          color: rgb(255, 255, 255);
        }
      }
    }
  }
  .submit-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1373;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    .submit {
      width: 444px;
      height: 226px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background: #fff;
      box-shadow: 0px 3px 38px 0px rgba(58, 64, 74, 0.26);
      border-radius: 8px;
      .submit-title-modal {
        text-align: center;
        margin: 70px 0 20px 0;
        font-size: 18px;
        font-weight: bold;
        color: #5d6066;
      }
      .submit-img {
        position: absolute;
        left: 50%;
        top: -44px;
        width: 88px;
        height: 88px;
        transform: translateX(-50%);
        background-color: #ffffff;
        border-radius: 50%;
        box-shadow: 0px 3px 16px 0px rgba(58, 64, 74, 0.08);
        overflow: hidden;
        img {
          display: block;
          width: 100%;
          height: 100%;
          background-color: var(--theme-color);
        }
      }
      .submit-tips {
        text-align: center;
        font-size: 14px;
      }
      .submit-btn {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        .ivu-btn {
          width: 90px;
          height: 34px;
          text-align: center;
          background-color: var(--theme-color);
          color: rgb(255, 255, 255);
        }
      }
    }
  }

  .pageposition {
    width: 1200px;
    height: 800px;
    margin: 0px auto;
    background: #fff;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      padding: 0 50px;
      border-bottom: 1px solid #e9edf5;
      .head-left {
        .head-l-t {
          font-size: 18px;
          font-weight: bold;
          color: #5a5e66;
        }
        .head-tips {
          font-size: 14px;
          font-weight: bold;
          color: #ff9090;
          margin-left: 20px;
        }
      }
      .head-right {
      }
    }
    .body-content {
      width: 100%;
      box-sizing: border-box;
      padding: 0 50px;
      .toppos {
        width: 100%;
        display: flex;
        height: 90px;

        .top-left {
          width: 20%;
          display: flex;
          align-items: center;
          img {
            background-color: var(--theme-color);
          }
          .time {
            font-size: 30px;
            font-weight: bold;
            color: #43474d;
          }
        }
        .mainpos {
          width: 20%;
          font-size: 30px;
          font-weight: bold;
          color: #43474d;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .top-right {
          width: 80%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          padding: 0 20px;
          .paper-name {
            font-size: 18px;
            font-weight: bold;
            color: #43474c;
          }
          .question-count {
            font-size: 18px;
            font-weight: bold;
            color: #43474c;
          }
        }
      }
      .questions {
        width: 100%;
        display: flex;
        height: 600px;
        .questions-left {
          width: 20%;
          .question-cart {
            width: 100%;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            font-weight: bold;
            color: #43474d;
          }
          .question-box {
            width: 100%;
            height: 560px;
            overflow: auto;
            &::-webkit-scrollbar {
              /*滚动条整体样式*/
              width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
              height: 1px;
            }
            &::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 10px;
              background-color: var(--theme-color);
              background-image: -webkit-linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.2) 75%,
                transparent 75%,
                transparent
              );
            }
            &::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              background: #ededed;
              border-radius: 10px;
            }
            .question-list {
              margin: 10px 0;
              // display: flex;
              // justify-content: space-between;
              border-radius: 10px;
              overflow: hidden;
              .list-item {
                float: left;
                width: 50px;
                margin: 0 1px;
                height: 24px;
                text-align: center;
                line-height: 20px;
                cursor: pointer;
                border: 1px solid #ddd;
              }
              .num_active {
                background-color: var(--theme-color);
                border: 1px solid var(--theme-color);
                color: #fff;
              }
              .active-left {
                // border-radius: 10px 0px 0px 10px;
                border-bottom-left-radius: 10px;
                border-top-left-radius: 10px;
              }
              .active-right {
                // border-radius: 0px 10px 10px 0px;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
              }
            }
          }
        }
        .questions-right {
          box-sizing: border-box;
          padding: 0 20px;
          width: 80%;
          .answer-box {
            margin: 12px 0;
            .ivu-radio-wrapper,
            .ivu-checkbox-wrapper {
              font-size: 14px;
              display: block;
            }
            .ivu-input {
              font-size: 14px;
            }
            .ivu-radio-wrapper + .ivu-radio-wrapper {
              margin-top: 12px;
            }
            .ivu-input-wrapper + .ivu-input-wrapper {
              margin-top: 12px;
            }
            .ivu-checkbox-wrapper + .ivu-checkbox-wrapper {
              margin-top: 12px;
            }
          }
          .question-btn {
            margin-bottom: 20px;
            text-align: right;
            .ivu-btn {
              background-color: var(--theme-color);
              color: rgb(255, 255, 255);
            }
          }
          .parsing {
            padding: 20px;
            border-top: 1px solid;
            height: 206px;
            width: 100%;
            .right_answer {
              .right-box {
                > p {
                  font-size: 14px;
                  color: #666;
                }
              }
              > p {
                font-size: 18px;
                color: #010101;
              }
              padding-bottom: 5px;
              font-family: SourceHanSansSC;
              font-weight: 700;
              font-size: 14px;
              color: #666;
              font-style: normal;
              letter-spacing: 0px;
              line-height: 27px;
              text-decoration: none;
            }
            .error_answer {
              padding-bottom: 5px;
              font-family: SourceHanSansSC;
              font-weight: 700;
              font-size: 18px;
              color: rgba(238, 65, 60, 1);
              font-style: normal;
              letter-spacing: 0px;
              line-height: 27px;
              text-decoration: none;
            }
            .error_parsing {
              padding-bottom: 5px;
              .e1 {
                width: 110px;
                font-family: SourceHanSansSC;
                font-weight: 700;
                font-size: 18px;
                color: rgb(16, 16, 16);
                font-style: normal;
                letter-spacing: 0px;
                line-height: 27px;
                text-decoration: none;
              }
              > p {
                font-family: SourceHanSansSC;
                font-weight: 400;
                font-size: 14px;
                color: #666;
                font-style: normal;
                letter-spacing: 0px;
                line-height: 24px;
                text-decoration: none;
              }
              .e-ctn {
                font-size: 14px;
                color: #666;
              }
            }
          }
        }
      }
    }
  }
}
</style>
